<template>
  <div>
    <el-container class="test-plan-container">
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'" class="sidebar-container" :class="{'is-collapse': isCollapse}">
        <div class="logo-container">
          <img src="../assets/123.png" alt="Logo" class="logo-img">
          <span v-show="!isCollapse">测试平台</span>
        </div>
        <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical"
          :collapse="isCollapse"
          background-color="#E0F2F1"
          text-color="#2C3E50"
          active-text-color="#009688">
          <el-submenu index="0">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>首页</span>
            </template>
            <el-menu-item index="/testplanform/home" @click="$router.push('/testplanform/home')">
              <i class="el-icon-s-home"></i>
              <span>主页</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-home"></i>
              <span>测试计划</span>
            </template>
            <el-menu-item index="/testingplan" @click="$router.push('/testingplan')">
              <i class="el-icon-s-order"></i>
              <span>测试计划</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span>Web 测试</span>
            </template>
            <el-menu-item index="/functioncase" @click="$router.push('/functioncase')">
              <i class="el-icon-tickets"></i>
              <span>功能用例</span>
            </el-menu-item>
            <el-menu-item index="/webautomation" @click="$router.push('/webautomation')">
              <i class="el-icon-magic-stick"></i>
              <span>Web自动化</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-mobile-phone"></i>
              <span>APP 测试</span>
            </template>
            <el-menu-item index="/appfunctioncase" @click="$router.push('/appfunctioncase')">
              <i class="el-icon-tickets"></i>
              <span>功能用例</span>
            </el-menu-item>
            <el-menu-item index="/appautomation" @click="$router.push('/appautomation')">
              <i class="el-icon-magic-stick"></i>
              <span>APP自动化</span>
            </el-menu-item>
            <el-menu-item index="/appexecution" @click="$router.push('/appexecution')">
              <i class="el-icon-video-play"></i>
              <span>用例执行</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>接口测试</span>
            </template>
            <!-- <el-menu-item index="/uploadapifile" @click="$router.push('/uploadapifile')">
              <i class="el-icon-upload"></i>
              <span>接口管理</span>
            </el-menu-item> -->
            <el-menu-item index="/apicase" @click="$router.push('/apicase')">
              <i class="el-icon-connection"></i>
              <span>接口用例</span>
            </el-menu-item>
            <el-menu-item index="/dataset" @click="$router.push('/dataset')">
              <i class="el-icon-data-line"></i>
              <span>数据配置</span>
            </el-menu-item>
            <el-menu-item index="/caseplay" @click="$router.push('/caseplay')">
              <i class="el-icon-video-play"></i>
              <span>用例执行</span>
            </el-menu-item>
            <el-menu-item index="/ecuprocess" @click="$router.push('/ecuprocess')">
              <i class="el-icon-odometer"></i>
              <span>执行进度</span>
            </el-menu-item>
            <el-menu-item index="/apitestreport" @click="$router.push('/apitestreport')">
              <i class="el-icon-s-data"></i>
              <span>测试报告</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-cpu"></i>
              <span>性能测试</span>
            </template>
            <el-menu-item index="/performancecase" @click="$router.push('/performancecase')">
              <i class="el-icon-tickets"></i>
              <span>性能用例</span>
            </el-menu-item>
            <el-menu-item index="/performancescript" @click="$router.push('/performancescript')">
              <i class="el-icon-edit-outline"></i>
              <span>测试脚本</span>
            </el-menu-item>
            <el-menu-item index="/performanceexecution" @click="$router.push('/performanceexecution')">
              <i class="el-icon-video-play"></i>
              <span>脚本执行</span>
            </el-menu-item>
            <el-menu-item index="/performancemonitor" @click="$router.push('/performancemonitor')">
              <i class="el-icon-monitor"></i>
              <span>性能监控</span>
            </el-menu-item>
            <el-menu-item index="/performancereport" @click="$router.push('/performancereport')">
              <i class="el-icon-s-data"></i>
              <span>测试报告</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-date"></i>
              <span>上传文档</span>
            </template>
            <el-menu-item index="/uploadneedfile" @click="$router.push('/uploadneedfile')">
              <i class="el-icon-document-add"></i>
              <span>上传需求文档</span>
            </el-menu-item>
            <el-menu-item index="/uploadapifile" @click="$router.push('/uploadapifile')">
              <i class="el-icon-document-add"></i>
              <span>上传接口文档</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="7">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>项目配置</span>
            </template>
            <el-menu-item index="/configuration" @click="$router.push('/configuration')">
              <i class="el-icon-s-tools"></i>
              <span>项目配置</span>
            </el-menu-item>
            <el-menu-item index="/usermanagement" @click="$router.push('/usermanagement')">
              <i class="el-icon-user-solid"></i>
              <span>用户管理</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
        <div class="collapse-btn" @click="toggleSideBar">
          <img src="../assets/cebian.png" alt="collapse" class="collapse-img" :class="{'is-active': !isCollapse}">
        </div>
      </el-aside>

      <!-- 主要内容区 -->
      <el-container>
        <!-- 顶部导航栏 -->
        <el-header height="60px" class="navbar">
          <!-- 左侧空白区域 -->
          <div class="navbar-left">
            <!-- 添加任务中心图标按钮 -->
            <div class="task-center-icon" @click="openTaskCenter">
              <el-badge :value="getTaskCenterActiveCount()" :max="99" class="task-badge">
                <i class="el-icon-s-order"></i>
              </el-badge>
            </div>
          </div>

          <!-- 中间导航菜单区域 -->
          <div class="navbar-center">
            <div class="nav-menu-group">
              <el-dropdown trigger="hover" placement="bottom" @command="handleNavCommand">
                <span class="nav-dropdown-link" tabindex="0">
                  <i class="el-icon-s-management"></i> 项目管理
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="project_create">
                    <i class="el-icon-plus"></i> 创建项目
                  </el-dropdown-item>
                  <el-dropdown-item command="project_list">
                    <i class="el-icon-tickets"></i> 项目列表
                  </el-dropdown-item>
                  <el-dropdown-item command="project_statistics">
                    <i class="el-icon-pie-chart"></i> 统计分析
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

              <el-dropdown trigger="hover" placement="bottom" @command="handleNavCommand">
                <span class="nav-dropdown-link" tabindex="0">
                  <i class="el-icon-s-grid"></i> 测试资源
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="resource_template">
                    <i class="el-icon-document"></i> 测试模板
                  </el-dropdown-item>
                  <el-dropdown-item command="resource_tools">
                    <i class="el-icon-s-tools"></i> 测试工具
                  </el-dropdown-item>
                  <el-dropdown-item command="resource_library">
                    <i class="el-icon-collection"></i> 知识库
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

              <el-dropdown trigger="hover" placement="bottom" @command="handleNavCommand">
                <span class="nav-dropdown-link" tabindex="0">
                  <i class="el-icon-s-tools"></i> 常用工具
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="tool_image">
                    <i class="el-icon-picture"></i> 识别图片
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>

          <!-- 右侧区域：小车和用户信息 -->
          <div class="navbar-right">
            <!-- 添加小车视频容器 -->
            <div class="car-animation-container">
              <div class="car-container">
                <video class="car-video" autoplay loop muted playsinline>
                  <source src="../assets/car.mp4" type="video/mp4">
                </video>
              </div>
            </div>

            <div class="welcome-text">
              欢迎 <span class="username">{{ username }}</span> 登录 ~
            </div>
            <el-dropdown trigger="hover" placement="bottom-end" @command="handleCommand">
              <div class="avatar-container">
                <img src="../assets/123.png" alt="Avatar" class="avatar-img">
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item disabled>
                  <div class="user-info">
                    <img src="../assets/123.png" alt="Avatar" class="dropdown-avatar">
                    <span>{{ username }}</span>
                  </div>
                </el-dropdown-item>
                <el-dropdown-item command="userInfo">
                  <i class="el-icon-user"></i> 用户信息
                </el-dropdown-item>
                <el-dropdown-item command="changePassword">
                  <i class="el-icon-key"></i> 修改密码
                </el-dropdown-item>
                <el-dropdown-item command="logout">
                  <i class="el-icon-switch-button"></i> 退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 内容区 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    <!-- 用户信息对话框 -->
    <el-dialog
      title="个人信息"
      :visible.sync="dialogVisible"
      width="400px"
      :close-on-click-modal="false"
      custom-class="user-info-dialog">
      
      <!-- 添加内部loading容器，替代dialog的v-loading -->
      <div v-if="isLoading" class="dialog-loading-container">
        <div class="custom-loading-spinner"></div>
        <div class="custom-loading-text">正在加载个人信息...</div>
      </div>
      
      <el-form v-else :model="userInfo" label-width="80px" size="small">
        <el-form-item label="用户名:">
          <el-input v-model="userInfo.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        
        <el-form-item label="邮箱:">
          <el-input v-model="userInfo.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        
        <el-form-item label="手机:">
          <el-input v-model="userInfo.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        
        <el-form-item label="最后登录:">
          <span class="info-text">{{ userInfo.lastLogin }}</span>
        </el-form-item>
        
        <el-form-item label="登录次数:">
          <span class="info-text">{{ userInfo.loginCount }}</span>
        </el-form-item>
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="saveLoading" @click="handleSaveUserInfo">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改密码对话框 -->
    <el-dialog
      title="修改密码"
      :visible.sync="passwordDialogVisible"
      width="400px"
      :close-on-click-modal="false"
      custom-class="password-dialog">
      <el-form
        :model="passwordForm"
        :rules="rules"
        ref="passwordForm"
        label-width="100px"
        size="small">
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input
            v-model="passwordForm.oldPassword"
            type="password"
            show-password
            placeholder="请输入旧密码">
          </el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="passwordForm.newPassword"
            type="password"
            show-password
            placeholder="请输入新密码">
          </el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="passwordForm.confirmPassword"
            type="password"
            show-password
            placeholder="请确认新密码">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelPasswordChange">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submitPasswordChange">确 定</el-button>
      </div>
    </el-dialog>
    
    <!-- 引入任务中心组件 -->
    <task-center ref="taskCenter" @badge-update="updateTaskBadge"></task-center>

    <!-- 图片识别对话框 -->
    <image-recognition-dialog
      :visible.sync="imageRecognitionDialogVisible"
    />
  </div>
</template>

<script>
// 导入任务中心组件
import TaskCenter from './taskcenter.vue'
import ImageRecognitionDialog from './ImageRecognitionDialog.vue'

export default {
  name: 'testplanform',
  components: {
    TaskCenter,
    ImageRecognitionDialog,
  },
  data() {
    return {
      isCollapse: false,
      activeMenu: '/testplanform/home',
      username: '未登录',
      dialogVisible: false,
      passwordDialogVisible: false,
      imageRecognitionDialogVisible: false,
      userInfo: {
        username: '',
        email: '',
        phone: ''
      },
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      saveLoading: false,
      submitLoading: false,
      rules: {
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请确认新密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value !== this.passwordForm.newPassword) {
                callback(new Error('两次输入的密码不一致'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ]
      },
      isLoading: false,
    }
  },
  created() {
    // 从localStorage获取用户名
    this.username = localStorage.getItem('username') || '未登录'
    
    // 监听storage变化，实时更新用户名
    window.addEventListener('storage', this.handleStorageChange)
  },
  mounted() {
    // 在组件挂载后获取用户信息
    this.getUserInfo()
  },
  beforeDestroy() {
    // 移除storage事件监听
    window.removeEventListener('storage', this.handleStorageChange)
  },
  methods: {
    handleStorageChange(e) {
      if (e.key === 'username') {
        this.username = e.newValue || '未登录'
      }
    },
    handleCommand(command) {
      if (command === 'image_recognition') {
        this.imageRecognitionDialogVisible = true
      }
      switch (command) {
        case 'userInfo':
          this.showUserInfo();
          break;
        case 'changePassword':
          this.showPasswordDialog();
          break;
        case 'logout':
          localStorage.removeItem('token');
          localStorage.removeItem('username');
          this.$message.success('已退出登录');
          this.$router.push('/');
          break;
        default:
          console.log('未处理的命令:', command);
      }
    },
    // 处理导航菜单命令
    handleNavCommand(command) {
      if (command === 'tool_image') {
        this.imageRecognitionDialogVisible = true
      }
      // 根据命令执行相应操作
      switch (command) {
        // 项目管理
        case 'project_create':
          this.$message.info('创建项目功能即将上线');
          break;
        case 'project_list':
          this.$message.info('正在加载项目列表');
          break;
        case 'project_statistics':
          this.$message.info('正在生成统计数据');
          break;
        
        // 测试资源
        case 'resource_template':
          this.$message.info('测试模板资源中心');
          break;
        case 'resource_tools':
          this.$message.info('测试工具下载中心');
          break;
        case 'resource_library':
          this.$message.info('打开测试知识库');
          break;
        
        default:
          console.log('未处理的命令:', command);
      }
    },
    toggleSideBar() {
      this.isCollapse = !this.isCollapse
    },
    setActiveMenu() {
      const path = this.$route.path
      this.activeMenu = path
      
      // 为父菜单设置激活状态类名
      this.$nextTick(() => {
        // 功能测试模块
        if (path.includes('/functioncase')) {
          this.addActiveClassToParent('2')
        }
        // 接口测试模块
        else if (path.includes('/uploadapifile') || path.includes('/apicase') ||
                path.includes('/dataset') || path.includes('/ecuprocess') ||
                path.includes('/caseplay') || path.includes('/apitestreport')) {
          this.addActiveClassToParent('4')
        }
        // 上传文档模块
        else if (path.includes('/uploadneedfile')) {
          this.addActiveClassToParent('6')
        }
        // 项目配置模块
        else if (path.includes('/configuration') || path.includes('/usermanagement')) {
          this.addActiveClassToParent('7')
        }
        // 首页模块
        else if (path.includes('/testplanform/home')) {
          this.addActiveClassToParent('0')
        }
        // 测试计划模块
        else if (path.includes('/testingplan')) {
          this.addActiveClassToParent('1')
        }
      })
    },
    addActiveClassToParent(index) {
      // 添加 is-active 类到父菜单
      this.$nextTick(() => {
        // 首先移除所有父菜单的激活状态
        const allSubmenuEls = document.querySelectorAll('.el-submenu');
        allSubmenuEls.forEach(el => {
          el.classList.remove('is-active');
        });
        
        // 使用更可靠的选择器查找父菜单
        const submenuEl = document.querySelector(`.el-submenu[index="${index}"]`);
        if (submenuEl) {
          submenuEl.classList.add('is-active');
        }
      });
    },
    // 显示用户信息对话框
    async showUserInfo() {
      this.dialogVisible = true;
      this.isLoading = true; // 开始加载
      try {
        const response = await this.$axios.get('/api/get_user_info/', {
          timeout: 20000 // 设置20秒超时
        });
        if (response.data.code === 200) {
          const userInfo = response.data.data;
          this.userInfo = {
            username: userInfo.username,
            email: userInfo.email || '',
            phone: userInfo.phone || '',
            lastLogin: userInfo.last_login || '从未登录',
            loginCount: userInfo.login_count || '0'
          };
        } else {
          this.$message.error(response.data.msg || '获取用户信息失败');
        }
      } catch (error) {
        console.error('获取用户信息失败:', error);
        this.$message.error('获取用户信息失败');
      } finally {
        this.isLoading = false; // 结束加载
      }
    },
    // 保存用户信息
    async handleSaveUserInfo() {
      this.saveLoading = true;  // 开始保存时显示loading
      try {
        const response = await this.$axios.post('/api/update_user_info/', {
          username: this.userInfo.username,
          email: this.userInfo.email,
          phone: this.userInfo.phone
        });
        
        if (response.data.code === 200) {
          this.$message.success(response.data.msg || '保存成功');
          // 更新本地存储的用户名
          localStorage.setItem('username', this.userInfo.username);
          // 更新页面显示的用户名
          this.username = this.userInfo.username;
          this.dialogVisible = false;
        } else {
          this.$message.error(response.data.msg || '保存失败');
        }
      } catch (error) {
        console.error('保存用户信息失败:', error);
        this.$message.error('保存失败，请稍后重试');
      } finally {
        this.saveLoading = false;  // 无论成功还是失败，都需要关闭loading
      }
    },
    // 显示修改密码对话框
    showPasswordDialog() {
      this.passwordDialogVisible = true;
      this.passwordForm = {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      };
    },
    // 取消修改密码
    cancelPasswordChange() {
      this.passwordDialogVisible = false;
      this.$refs.passwordForm.resetFields();
    },
    // 提交修改密码
    submitPasswordChange() {
      this.$refs.passwordForm.validate(async (valid) => {
        if (valid) {
          this.submitLoading = true;
          try {
            const response = await this.$axios.post('/api/change_password/', {
              old_password: this.passwordForm.oldPassword,
              new_password: this.passwordForm.newPassword,
              confirm_password: this.passwordForm.confirmPassword
            }, {
              timeout: 20000,  // 设置20秒超时
              headers: {
                'Content-Type': 'application/json'
              }
            });
            
            // 根据返回的状态码处理不同情况
            if (response.data.code === 200) {
              // 密码修改成功
              this.$message.success(response.data.msg || '密码修改成功');
              this.passwordDialogVisible = false;
              localStorage.removeItem('token');
              localStorage.removeItem('username');
              setTimeout(() => {
                this.$router.push('/');
              }, 1500);
            } else if (response.data.code === 401) {
              // 旧密码不正确，只清空旧密码输入框并提示
              this.$message.error(response.data.msg || '原密码不正确');
              this.passwordForm.oldPassword = '';
              this.$refs.passwordForm.clearValidate('oldPassword');
            } else {
              // 其他错误情况
              this.$message.error(response.data.msg || '密码修改失败，请稍后重试');
            }
          } catch (error) {
            // 只处理网络错误等异常情况
            console.error('修改密码失败:', error);
            this.$message.error('网络错误，请稍后重试');
          } finally {
            this.submitLoading = false;
          }
        }
      });
    },
    // 打开任务中心
    openTaskCenter() {
      this.$refs.taskCenter.showTaskCenter();
    },
    
    // 获取任务中心活跃任务数量
    getTaskCenterActiveCount() {
      if (this.$refs.taskCenter) {
        return this.$refs.taskCenter.getActiveTaskCount();
      }
      return 0;
    },
    getStatusType(status) {
      const statusMap = {
        '待处理': 'info',
        '进行中': 'warning',
        '已完成': 'success',
        '已取消': 'danger',
        '失败': 'danger'
      };
      return statusMap[status] || 'info';
    },
    getPriorityType(priority) {
      const priorityMap = {
        '高': 'danger',
        '中': 'warning',
        '低': 'info'
      };
      return priorityMap[priority] || 'info';
    },
    updateTaskBadge() {
      // 强制更新任务中心角标计数
      if (this.$refs.taskCenter) {
        // 创建一个临时变量保存当前计数
        const count = this.$refs.taskCenter.getActiveTaskCount();
        console.log('当前活跃任务数量:', count);
        
        // 强制更新视图
        this.$forceUpdate();
        
        // 如果需要更复杂的刷新逻辑，可以在这里实现
      }
    },
  }
}
</script>

<style>
/* 全局主题样式 */
:root {
  --background-light: #ffffff;
  --background-dark: #1f1f1f;
}

/* 深色主题类 */
.theme-dark .el-main,
.theme-dark .home-container,
.theme-dark .el-card {
  background-color: var(--background-dark) !important;
}

/* 浅色主题类 */
.el-main,
.home-container,
.el-card {
  background-color: var(--background-light);
}

.test-plan-container {
  height: 100vh;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.sidebar-container {
  background-color: #E0F2F1;
  transition: all 0.3s ease;
  position: relative;
  height: 100%;
  overflow: visible;
  z-index: 2;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.sidebar-container::-webkit-scrollbar {
  width: 0;
  display: none;
}

.logo-container {
  height: 60px;
  line-height: 60px;
  background: #B2DFDB;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  flex-shrink: 0; /* 防止logo区域被压缩 */
}

.logo-container .logo-img {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 12px;
  border-radius: 50%;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.logo-container:hover .logo-img {
  transform: scale(1.1);
  box-shadow: 0 0 8px rgba(0, 150, 136, 0.8);
  border-color: #009688;
}

.logo-container span {
  display: inline-block;
  vertical-align: middle;
  color: #2C3E50;
  font-size: 16px;
  font-weight: 600;
}

.collapse-btn {
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  background-color: #B2DFDB;
  border: 1px solid #80CBC4;
  border-radius: 50%;
  z-index: 999;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.collapse-img {
  width: 20px;
  height: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: rotate(0deg);
}

/* 修改旋转角度为180度，使其有半圈旋转效果 */
.collapse-img.is-active {
  transform: rotate(180deg);
}

/* 添加悬停效果 - 展开状态 */
.collapse-btn:hover .collapse-img:not(.is-active) {
  transform: rotate(180deg);
}

/* 添加悬停效果 - 收起状态 */
.collapse-btn:hover .collapse-img.is-active {
  transform: rotate(0deg);
}

/* 基础悬停样式 */
.collapse-btn:hover {
  background-color: #80CBC4;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.el-dropdown-menu__item.is-disabled:hover {
  background-color: #f5f7fa;
  color: #606266;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 5px 0;
}

.dropdown-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 8px;
}

.el-main {
  transition: background-color 0.3s ease;
  padding: 0;
}

/* Reset default browser margins */
body {
  margin: 0;
  padding: 0;
}

/* 用户信息对话框样式 */
.user-info-dialog {
  border-radius: 8px;
}

.user-info-dialog .el-dialog__header {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.user-info-dialog .el-dialog__body {
  padding: 30px 20px;
}

.user-info-dialog .el-form-item {
  margin-bottom: 20px;
}

.user-info-dialog .el-input.is-disabled .el-input__inner {
  color: #606266;
  background-color: #f5f7fa;
}

.dialog-footer {
  text-align: right;
  padding-top: 10px;
}

.dialog-footer .el-button {
  padding: 9px 20px;
}

.password-dialog .el-input {
  width: 100%;
}

.password-dialog .el-form-item {
  margin-bottom: 20px;
}

.password-dialog .el-dialog__body {
  padding: 30px 20px;
}

.info-text {
  color: #606266;
  line-height: 32px;
  font-size: 14px;
  padding: 0 15px;
}

.navbar {
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  position: relative;
  overflow: visible;
  min-width: 900px;
}

.navbar-left {
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.navbar-center {
  display: flex;
  align-items: center;
  justify-content: center;  /* 确保居中对齐 */
  flex: 2;  /* 占据更多空间 */
  position: absolute;  /* 使用绝对定位 */
  left: 50%;  /* 水平居中 */
  transform: translateX(-50%);  /* 水平居中偏移 */
  min-width: 400px;
  overflow-x: auto;
}

.nav-menu-group {
  display: flex;
  gap: 40px;  /* 增加间距 */
  justify-content: center;
  flex-wrap: nowrap;
  padding: 0 10px;
  margin: 0 auto;  /* 水平居中 */
}

.navbar-right {
  display: flex;
  align-items: center;
  flex: 1;  /* 改为 1，允许伸缩 */
  justify-content: flex-end;  /* 靠右对齐 */
  white-space: nowrap;
}

/* 修改导航链接样式 */
.nav-dropdown-link {
  padding: 8px 16px;  /* 增加内边距 */
  white-space: nowrap;
  min-width: auto;
  font-size: 14px;
  font-weight: 500;  /* 稍微加粗 */
}

/* 更新响应式布局 */
@media screen and (max-width: 1200px) {
  .nav-menu-group {
    gap: 30px;  /* 在较小屏幕上减小间距，但保持适当距离 */
  }
}

@media screen and (max-width: 1000px) {
  .nav-menu-group {
    gap: 20px;
  }
  
  .navbar-center {
    justify-content: center;  /* 保持居中 */
  }
}

/* 小车动画容器 */
.car-animation-container {
  width: 200px;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 20px;
}

/* 小车容器 */
.car-container {
  width: 60px;
  height: 40px;
  position: absolute;
  animation: carMove 6s ease-in-out infinite;
}

/* 小车视频样式 */
.car-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 小车移动动画 */
@keyframes carMove {
  0% {
    left: 0;
    transform: scaleX(1);
  }
  45% {
    left: 140px;
    transform: scaleX(1);
  }
  47.5% {
    left: 140px;
    transform: scaleX(0);
  }
  50% {
    left: 140px;
    transform: scaleX(-1);
  }
  95% {
    left: 0;
    transform: scaleX(-1);
  }
  97.5% {
    left: 0;
    transform: scaleX(0);
  }
  100% {
    left: 0;
    transform: scaleX(1);
  }
}

.nav-dropdown-link {
  color: #2C3E50;
  font-size: 14px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  position: relative;
  white-space: nowrap;
}

.nav-dropdown-link i {
  margin-right: 5px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.nav-dropdown-link:hover i {
  transform: scale(1.1);
  color: #009688;
}

/* 确保dropdown组件有足够的悬停区域 */
.el-dropdown {
  display: inline-block;
  position: relative;
  z-index: 10; /* 确保下拉菜单显示在其他元素之上 */
}

.nav-dropdown-link:hover {
  color: #009688;
  background-color: rgba(0, 150, 136, 0.05);
}

/* 添加下划线悬停效果 */
.nav-dropdown-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: #009688;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-dropdown-link:hover::after {
  width: 80%;
}

.welcome-text {
  margin-right: 15px;
  color: #2C3E50;
  font-size: 14px;
}

.username {
  color: #009688;
  font-weight: 600;
}

.avatar-container {
  margin-left: 20px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  padding: 5px; /* 增加可点击区域 */
  border-radius: 50%;
  z-index: 10; /* 确保下拉菜单显示 */
}

/* 移除下拉箭头样式 */
/* .avatar-container .el-icon-caret-bottom {
  margin-left: 5px;
  font-size: 12px;
  color: #666;
} */

.avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  vertical-align: middle;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.avatar-container:hover .avatar-img {
  transform: scale(1.1);
  box-shadow: 0 0 8px rgba(0, 150, 136, 0.8);
  border-color: #009688;
}

.el-dropdown-menu {
  padding: 0;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 2000; /* 确保下拉菜单显示在最上层 */
}

/* 为下拉菜单添加简单的过渡效果，避免使用可能导致冲突的方式 */
.el-dropdown-menu.el-popper {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.el-dropdown-menu__item {
  line-height: 40px;
  padding: 0 20px;
  margin: 0;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
  outline: none;
}

.el-dropdown-menu__item:hover {
  background-color: #ecf5ff;
  color: #409EFF;
}

.el-dropdown-menu__item i {
  margin-right: 8px;
  font-size: 16px;
  width: 14px; /* 固定宽度，保证图标对齐 */
  text-align: center; /* 水平居中图标 */
  transition: all 0.3s ease;
}

.el-dropdown-menu__item:hover i {
  transform: scale(1.1);
  color: #409EFF;
}

.el-dropdown-menu__item.is-disabled {
  background-color: #f5f7fa;
  cursor: default;
  padding: 5px 20px;
}

.el-dropdown-menu__item.is-disabled:hover {
  background-color: #f5f7fa;
  color: #606266;
}

.el-menu-vertical {
  border-right: none;
  transition: width 0.3s ease;
  padding-top: 6px;
  overflow-y: auto; /* 允许垂直滚动 */
  overflow-x: hidden; /* 防止水平滚动 */
  flex: 1; /* 占用剩余空间 */
  height: calc(100% - 60px); /* 减去logo高度 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

/* 完全隐藏滚动条 */
.el-menu-vertical::-webkit-scrollbar {
  width: 0;
  display: none; /* Safari and Chrome */
}

/* 折叠菜单样式优化 */
.el-menu--collapse {
  width: 64px !important;
}

.el-menu--collapse .el-submenu__title {
  padding: 0 20px !important;
}

/* 主题切换按钮需要保持在底部 */
.el-menu-item[index="theme"] {
  margin-top: 15px;
  margin-bottom: 10px;
}

/* 处理折叠时的菜单高度和滚动 */
.is-collapse .el-menu-vertical {
  overflow: hidden;
  height: calc(100% - 60px);
}

.is-collapse .el-menu-vertical:hover {
  overflow-y: auto;
}

/* 立即隐藏折叠时的文字和箭头 */
.el-menu--collapse .el-submenu__title span,
.el-menu--collapse .el-menu-item span,
.el-menu--collapse .el-menu-item-group,
.el-menu--collapse .el-submenu > .el-submenu__title > span,
.el-menu--collapse .el-submenu__icon-arrow {
  display: none !important;
}

/* 图标居中显示 */
.el-menu--collapse .el-menu-item i,
.el-menu--collapse .el-submenu__title i {
  margin: 0;
  vertical-align: middle;
  width: 24px;
  text-align: center;
}

/* 折叠状态下，当子菜单激活时父菜单高亮 */
.el-menu--collapse .el-submenu.is-active > .el-submenu__title {
  color: #009688 !important;
}

.el-menu--collapse .el-submenu.is-active > .el-submenu__title i {
  color: #009688 !important;
}

/* 确保子菜单弹出样式正确 */
.el-menu--popup {
  min-width: 200px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 6px 0;
}

.el-menu--popup .el-menu-item span,
.el-menu--popup .el-submenu__title span {
  display: inline-block !important;
}

/* 确保折叠菜单的弹出子菜单中显示图标 */
.el-menu--popup .el-menu-item i {
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 16px;
  display: inline-block !important;
}

/* 修复弹出菜单中的图标和文字对齐问题 */
.el-menu--popup .el-menu-item {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  margin: 4px 0;
}

/* 菜单项通用悬停样式 */
.el-menu-item {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease !important;
  margin: 4px 0;
  border-radius: 0 20px 20px 0;
}

.el-menu-item:hover {
  background-color: rgba(0, 150, 136, 0.1) !important;
}

.el-menu-item:hover i {
  color: #009688;
  transform: scale(1.1);
}

.el-menu-item:hover span {
  color: #009688;
  font-weight: 600;
}

/* 活跃状态的菜单项 */
.el-menu-item.is-active {
  background-color: rgba(0, 150, 136, 0.15) !important;
}

.el-menu-item.is-active i,
.el-menu-item.is-active span {
  color: #009688 !important;
  font-weight: 600;
}

.el-menu-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background-color: #009688;
}

.el-menu-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: #009688;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.el-menu-item:hover::after {
  width: 60%;
}

/* 弹出菜单中的项也应用相同样式 */
.el-menu--popup .el-menu-item {
  border-radius: 4px;
  margin: 2px 5px;
  padding: 0 16px;
}

.el-menu--popup .el-menu-item:hover {
  background-color: rgba(0, 150, 136, 0.1) !important;
}

.el-menu--popup .el-menu-item:hover i {
  color: #009688;
  transform: scale(1.1);
}

.el-menu--popup .el-menu-item:hover span {
  color: #009688;
  font-weight: 600;
}

/* 弹出菜单中活跃状态的样式 */
.el-menu--popup .el-menu-item.is-active {
  background-color: rgba(0, 150, 136, 0.15) !important;
}

.el-menu--popup .el-menu-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background-color: #009688;
  border-radius: 2px;
}

/* 主题切换按钮特殊悬停样式 */
.el-menu-item[index="theme"]:hover i {
  transform: rotate(30deg) scale(1.1);
}

/* 主题切换按钮图标样式 */
.el-menu-item[index="theme"] i {
  font-size: 18px;
  transition: all 0.3s ease;
}

/* 改进submenu的样式 */
.el-submenu__title {
  transition: all 0.3s ease !important;
  border-radius: 0 20px 20px 0;
}
.el-submenu__title:hover {
  background-color: rgba(0, 150, 136, 0.1) !important;
}

.el-submenu__title:hover i,
.el-submenu__title:hover span {
  color: #009688;
}

.el-submenu__title i {
  transition: all 0.3s ease;
}

.el-submenu__title:hover i {
  transform: scale(1.1);
}

/* 添加loading样式 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

.loading-image {
  width: 50px;
  height: 50px;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 自定义加载样式 */
.custom-loading .el-loading-spinner .circular {
  display: none;
}

.custom-loading .el-loading-spinner::before {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  background: url(../assets/loading.png) no-repeat center center;
  background-size: contain;
  animation: rotate 1.5s linear infinite;
  margin: 0 auto;
}

/* 自定义加载文字样式 */
.custom-loading .el-loading-spinner .el-loading-text {
  color: #000000 !important; /* 黑色文字 */
  margin-top: 10px !important; /* 与图标保持10px距离 */
  font-size: 14px;
  display: block !important; /* 确保显示 */
}

/* 对话框内部loading容器样式 */
.dialog-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 20px;
}

.custom-loading-spinner {
  width: 50px;
  height: 50px;
  background: url(../assets/loading.png) no-repeat center center;
  background-size: contain;
  animation: rotate 1.5s linear infinite;
}

.custom-loading-text {
  margin-top: 10px;
  color: #000000;
  font-size: 14px;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 添加任务中心相关样式 */
.task-center-dialog {
  border-radius: 8px;
}

.task-center-dialog .el-dialog__header {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.task-center-dialog .el-dialog__body {
  padding: 20px;
}

.task-center-content {
  min-height: 400px;
}

.task-list {
  width: 100%;
}

/* 修改表格样式以防止出现滚动条 */
.task-list .el-table {
  width: 100% !important;
  overflow: hidden !important;
}

.task-list .el-table__body-wrapper {
  overflow-x: hidden !important;
}

/* 调整表格列宽度 */
.task-list .el-table .el-table__header-wrapper {
  width: 100% !important;
}

.task-list .el-table__body {
  width: 100% !important;
}

.task-list .el-table__row {
  width: 100% !important;
}

/* 设置表格列的最小宽度和最大宽度 */
.task-list .el-table .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-list .el-table th,
.task-list .el-table td {
  text-align: center !important;
  padding: 8px 0;
}

.task-list .el-table th > .cell,
.task-list .el-table td > .cell {
  text-align: center !important;
}

.progress-cell {
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.task-list .el-progress {
  flex: 1;
  margin-right: 8px;
}

.progress-text {
  min-width: 40px;
  text-align: right;
  font-size: 13px;
  color: #606266;
}

.task-list .el-progress-bar {
  width: 100%;
  margin-right: 0;
  padding-right: 0;
}

.task-list .el-progress-bar__outer {
  height: 6px !important;
  background-color: #EBEEF5;
}

.task-list .el-progress-bar__inner {
  transition: width 0.3s ease;
}

/* 添加任务中心图标样式 */
.task-center-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 20px;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.task-center-icon i {
  font-size: 24px;
  color: #2C3E50;
  transition: all 0.3s ease;
}

.task-center-icon:hover {
  background-color: rgba(0, 150, 136, 0.1);
}

.task-center-icon:hover i {
  color: #009688;
  transform: scale(1.1);
}

.task-badge {
  margin-top: 3px;
}

.task-badge .el-badge__content {
  background-color: #f56c6c;
}

/* 调整导航栏左侧区域样式 */
.navbar-left {
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.task-list .el-table {
  width: 100%;
}

.task-list .el-table th {
  text-align: center !important;
}

.task-list .el-table th > .cell {
  text-align: center !important;
}

.task-list .el-table td {
  text-align: center !important;
}

.task-list .el-table .cell {
  text-align: center !important;
}

.task-list .el-progress {
  width: 90%;
  display: inline-block;
}

.task-list .el-progress-bar {
  width: 100%;
  margin-right: 0;
  padding-right: 0;
}

.task-list .el-progress-bar__outer {
  height: 6px !important;
}

.task-list .el-progress__text {
  margin-left: 5px;
}

.task-list .el-table .progress-cell {
  padding: 5px;
}

.task-name-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  padding: 0 5px;
}

/* 添加操作列按钮对齐样式 */
.task-list .el-table .operation-btns {
  display: flex;
  align-items: center; /* Ensure vertical centering of buttons */
  height: 100%;
  width: 100%;
}

.task-list .el-table .operation-btns .el-button {
  margin: 0;
  padding: 0 5px; /* Consistent padding */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  line-height: 1;
  vertical-align: middle;
  position: relative;
  min-width: 32px; /* Ensure minimum width for each button */
  white-space: nowrap;
}

/* Make button text consistent */
.task-list .el-table .operation-btns .el-button span {
  vertical-align: middle;
  font-size: 12px;
}

/* For all table cells to ensure consistent vertical alignment */
.task-list .el-table td.el-table__cell {
  vertical-align: middle !important;
  height: 48px; /* Consistent height */
}

.task-list .el-table .operation-btns .el-button + .el-button {
  margin-left: 4px; /* Reduce margin between buttons from 8px to 4px */
}

/* For "已完成" and "失败" tabs - center align the single delete button */
.task-list .el-table .operation-btns.single-btn {
  justify-content: center;
  padding: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

/* For "全部任务" tab - right align buttons instead of centering */
#全部任务 .task-list .el-table .operation-btns:not(.single-btn) {
  justify-content: flex-end;
}

/* For "全部任务" tab with single delete button - right align to match other buttons */
#全部任务 .task-list .el-table .operation-btns.single-btn {
  justify-content: flex-end;
}

/* Ensure cell has proper vertical alignment */
.task-list .el-table td.el-table__cell {
  padding: 8px 0;
  height: 48px; /* Set consistent height for all cells */
  vertical-align: middle; /* Ensure vertical alignment is middle */
}

/* Make delete buttons more visible */
.task-list .el-table .operation-btns .el-button {
  margin: 0;
  padding: 0 5px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 32px;
  overflow: visible; /* Ensure button text is never cut off */
}

/* Specific style for single delete buttons to ensure consistent positioning */
.task-list .el-table .operation-btns.single-btn .el-button {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  min-width: 42px; /* Minimum width for delete button */
}

/* Override for the "全部任务" tab single-button case */
#全部任务 .task-list .el-table .operation-btns.single-btn .el-button {
  margin: 0 0 0 auto; /* Right align instead of centering */
}

/* Ensure table header and cells have consistent padding */
.task-list .el-table th, 
.task-list .el-table td {
  text-align: center !important;
  padding: 8px 2px; /* Reduce horizontal padding */
}

/* Additional utility class for ensuring button text is visible */
.el-button.no-truncate {
  text-overflow: initial;
  overflow: visible;
}

/* Ensure icon and text are aligned */
.task-list .el-table .operation-btns .el-button i {
  vertical-align: middle;
  margin-right: 2px; /* Reduce from 3px to 2px */
  line-height: 1;
}

/* Ensure button text doesn't wrap and is properly sized */
.task-list .el-table .operation-btns .el-button span {
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1;
  font-size: 12px; /* Slightly smaller font size for button text */
}

.ellipsis-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 添加失败原因单元格样式 */
.fail-reason-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 5px;
  width: 100%;
  overflow: hidden;
  max-width: 100%; /* Ensure strict containment */
  box-sizing: border-box; /* Include padding in width calculation */
}

.fail-reason-cell .ellipsis-text {
  width: 100%;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  padding-right: 0; /* Remove right padding that could push into operation column */
  box-sizing: border-box;
}

/* Ensure strict column boundaries */
.task-list .el-table .el-table__cell {
  overflow: hidden; /* Hide overflow content */
}

/* Make sure operation column remains independent */
.task-list .el-table .el-table__cell:last-child {
  overflow: visible; /* Allow operation buttons to be fully visible */
  min-width: 80px; /* Ensure minimum width for operation column */
}

/* Make the delete button layout more robust */
.task-list .el-table .el-table__row .operation-btns.single-btn {
  justify-content: center;
  padding: 0;
  left: 0;
  position: static; /* Remove relative positioning */
  width: 100%;
  height: 100%;
}

.task-list .el-table .el-table__row .operation-btns.single-btn .el-button {
  margin: 0;
  position: relative;
  left: 0;
  transform: none;
}

/* For "全部任务" tab with single delete button - right align to match other buttons */
.el-tab-pane[label="全部任务"] .operation-btns.single-btn {
  justify-content: flex-end !important;
}

/* For "全部任务" tab with single delete button - right align the button */
.el-tab-pane[label="全部任务"] .operation-btns.single-btn .el-button {
  margin: 0 0 0 auto !important;
}

/* Specific adjustment for the "失败" tab operation column */
.el-tab-pane[label="失败"] .operation-btns.single-btn {
  justify-content: center;
  padding: 0;
  display: flex;
  align-items: center;
}

.el-tab-pane[label="失败"] .operation-btns.single-btn .el-button {
  margin: 0 auto;
  position: static;
}

/* Ensure all table cells have consistent vertical alignment */
.task-list .el-table .el-table__header-wrapper th,
.task-list .el-table .el-table__body-wrapper td {
  vertical-align: middle !important;
}

/* Ensure consistent spacing for all cells */
.task-list .el-table .el-table__row td {
  padding: 8px 2px;
}

/* 保持按钮原来的颜色 */
.theme-dark .el-button.el-button--primary,
.theme-dark .el-button.el-button--success,
.theme-dark .el-button.el-button--warning,
.theme-dark .el-button.el-button--danger,
.theme-dark .el-button.el-button--info {
  /* 不修改有颜色的按钮 */
  background-color: inherit;
  color: inherit;
  border-color: inherit;
}
</style>


